import * as echarts from 'echarts'
export default {
    props: {
        source: {
            type: [Array, Object],
            default: () => [],
        },
        title: {
            type: String,
            default: '',
        },
    },
    watch: {
        source: {
            handler(newVal) {
                this._$setChartOptions(newVal)
            },
            immediate: true,
        },
    },
    async mounted() {
        this.chartHook = undefined
        this.$nextTick(() => {
            this.chartHook = echarts.init(this.$refs.containerRef)

            this._$setChartOptions(this.source)
        })
        window.addEventListener('resize', this._$resizeChart)
    },
    destroyed() {
        window.removeEventListener('resize', this._$resizeChart)
    },
    methods: {
        _$resizeChart() {
            this.chartHook?.resize()
        },
        _$formatterTooltip({ params, unit }) {
            let html = params && params.length !== 0 ? params[0].name : ''
            params.forEach((item) => {
                html += `<div>${item.marker} ${
                    item.seriesName
                }  <span style="display:inline-block;width:30px"></span> ${item.value} ${
                    unit || ''
                } </div>`
            })
            return html
        },
    },
}
